---
menu: Introduction
title: Getting Started
order: 5
---

# Getting Started

Follow these few steps to get ready with `@loadable/component`.

## Installation

Installing `@loadable/component` only takes a single command and you're ready to roll:

```bash
npm install @loadable/component
# or use yarn
yarn add @loadable/component
```

> `@loadable/babel-plugin` is required for [Server Side Rendering](/docs/server-side-rendering/) and automatic chunk names generation. `@loadable/server` and `@loadable/webpack-plugin` are only required for [Server Side Rendering](/docs/server-side-rendering/).

## Split your first component

Loadable lets you render a dynamic import as a regular component.

```js
import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'))

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}
```

That's it, `OtherComponent` will now be loaded in a separated bundle!
